<template>
  <el-scrollbar>
    <el-menu
      :class="{ 'elmenu-dark': isDark }"
      :default-openeds="['1']"
      class="el-menu-vertical-demo"
      default-active="2"
      router
    >
      <template v-for="item in routeList">
        <template v-if="!item.children">
          <el-menu-item :key="item.name" :index="item.path">
            <el-icon>
              <setting />
            </el-icon>
            <template #title>{{ item!.meta?.title || item.name }}</template>
          </el-menu-item>
        </template>

        <template v-else>
          <el-sub-menu :key="item.name" :index="item.path">
            <template #title>
              <el-icon>
                <setting />
              </el-icon>
              {{ item!.meta?.title || item.name }}
            </template>

            <el-menu-item
              v-for="sonItem in item.children"
              :key="sonItem.name"
              :index="item.path + '/' + sonItem.path"
            >
              {{ sonItem!.meta?.title || sonItem.name }}
            </el-menu-item>
          </el-sub-menu>
        </template>
      </template>
    </el-menu>
  </el-scrollbar>
</template>

<script lang="ts" setup>
const { routeList, isDark } = defineProps<{
  routeList: any
  isDark: any
}>()
</script>

<style lang="scss" scoped></style>
